<fieldset class="layui-elem-field layui-field-title site-title">
  <legend><a name="fixbar">生活缴费</a></legend>
</fieldset>
<form id="payForm" class="layui-form" action="##" onsubmit="return false"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

<!--  <div class="layui-form-item">-->
<!--    <label class="layui-form-label">宿舍号</label>-->
<!--    <div class="layui-input-block">-->
<!--      <input id="roomBar" type="text" name="roomNum" placeholder="100" autocomplete="off" class="layui-input">-->
<!--    </div>-->
<!--  </div>-->
  <div class="layui-form-item">
    <label class="layui-form-label">水费余额(元)</label>
    <div class="layui-form-mid layui-word-aux" id="waterBalanceBody">balanceBody</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">电费余额(元)</label>
    <div class="layui-form-mid layui-word-aux" id="electricBalanceBody">balanceBody</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">气费余额(元)</label>
    <div class="layui-form-mid layui-word-aux" id="gasBalanceBody">balanceBody</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">缴费类型</label>
    <div class="layui-input-block">
      <select name="payType" lay-filter="payType">
        <option value="水费">水费</option>
        <option value="电费">电费</option>
        <option value="燃气费">燃气费</option>
      </select>
    </div>
  </div>

<!--  <div class="layui-form-item">-->
<!--    <label class="layui-form-label">自动续费</label>-->
<!--    <div class="layui-input-block">-->
<!--      <input type="checkbox" lay-skin="switch" name="autoContinuePay" >-->
<!--    </div>-->
<!--  </div>-->
  <div class="layui-form-item">
    <label class="layui-form-label">缴费金额</label>
    <div class="layui-input-block">
      <input id="inputBar" type="text" name="money" placeholder="100" value =100 autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="pay">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
  <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<!--<script src="/static/build/layui.js"></script>-->
<script>
  function selectCard() {
    $.ajax({
      //几个参数需要注意一下
      type: "get",//方法类型
      dataType: "json",//预期服务器返回的数据类型
      url: "http://localhost:8080/money/getAllBalance",//url
      success: function (datas) {
        console.log(datas);//打印服务端返回的数据(调试用)
        console.log(datas.length);//打印服务端返回的数据(调试用)
        // $('#cardIDBody').html(datas.userID);
        // $('#balanceBody').html(datas.cardBalance);
        $('#waterBalanceBody').html(datas.waterBalance);
        $('#electricBalanceBody').html(datas.electricBalance);
        $('#gasBalanceBody').html(datas.gasBalance);
      },
      error: function () {
        layer.msg("网络异常！请稍后再试");
      }

    });
  };
  selectCard();
  var submitFlag =true;
  // layer.msg("pay");
  function pay(data) {
    if(submitFlag == false){
      return false;
    }
    submitFlag = false
    // layer.msg($('#payForm').serialize());
    $.ajax({
      //几个参数需要注意一下
      type: "GET",//方法类型
      dataType: "json",//预期服务器返回的数据类型
      url: "http://localhost:8080/money/payFromCard",//url
      data: $('#payForm').serialize(),
      // data: {payNum : inputNum},
      success: function (datas) {
        submitFlag =true;

        layer.msg("缴费成功");
        console.log(datas);//打印服务端返回的数据(调试用)
        if(datas === true) {
          var waterBalance = $('#waterBalanceBody')[0].innerText;
          var gasBalance = $('#gasBalanceBody')[0].innerText;
          var elecBalance = $('#electricBalanceBody')[0].innerText;
          var type = data.field.payType;
          var money = data.field.money;
          console.log(type);
          console.log(money);
          if( type === "水费"){
          $('#waterBalanceBody').html(eval(waterBalance)+eval(money));
          // alert(eval(org));
          }
          else if(type === "电费"){
            $('#electricBalanceBody').html(eval(elecBalance)+eval(money));
          }
          else if(type === "燃气费"){
            $('#gasBalanceBody').html(eval(gasBalance)+eval(money));
          }

        }
        else {
          layer.msg("缴费失败");
        }
      },
      error: function () {
        submitFlag =true;

        layer.msg("网络异常！请稍后再试");
      }

    });
  };
  layui.use('form', function(){
    var form = layui.form;
    form.render();
    //各种基于事件的操作，下面会有进一步介绍
    form.on('submit(pay)', function(data){

      console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
      console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
      console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
      layer.msg("正在支付...");

      pay(data);

      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });

  });
</script>